<template>
  <div class="newTeachMaterial">
    <el-breadcrumb separator="/" class="breadcrumb-bottom">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>教材管理</el-breadcrumb-item>
      <el-breadcrumb-item>教材库信息</el-breadcrumb-item>
      <el-breadcrumb-item>新增教材库信息</el-breadcrumb-item>
    </el-breadcrumb>

    <el-form ref="newTextbookForm" :model="newTextbookForm" label-width="120px" :rules="rules" class="fixed-form">
      <el-form-item label="教材编号" prop="textbookId">
        <el-input v-model="newTextbookForm.textbookId" name="user"></el-input>
      </el-form-item>
      <el-form-item label="教材名称" prop="textbookName">
        <el-input v-model="newTextbookForm.textbookName"></el-input>
      </el-form-item>
      <el-form-item label="出版社" prop="publishingHouse">
        <el-input v-model="newTextbookForm.publishingHouse"></el-input>
      </el-form-item>
      <el-form-item label="作者" prop="author">
        <el-input v-model="newTextbookForm.author"></el-input>
      </el-form-item>
      <el-form-item label="ISBN" prop="isbn">
        <el-input v-model="newTextbookForm.isbn"></el-input>
      </el-form-item>
      <el-form-item label="单价" prop="price">
        <el-input v-model="newTextbookForm.price"></el-input>
      </el-form-item>
      <el-form-item label="使用课程" prop="teacherCourseId">
        <el-select
          filterable
          remote
          clearable
          v-model="newTextbookForm.teacherCourseId"
          placeholder="请选择使用课程"
          class="full-line">
          <el-option
            v-for="item in teacherCourseIdChoose"
            :label="item.courseNameCN"
            :value="item.teacherCourseId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="教材简介" prop="remark1">
        <el-input type="textarea" :rows="5" v-model="newTextbookForm.remark1"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('newTextbookForm')">立即创建</el-button>
        <el-button @click="resetForm('addClassForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<style>
</style>
<script>
  export default{
    name: 'newTeachMaterial',
    data(){
      return {
        newTextbookForm: {
          textbookId: '',
          textbookName: '',
          publishingHouse: '',
          author: '',
          isbn: '',
          price: '',
          teacherCourseId: '',
          remark1: ''
        },
        rules: {
          textbookId: [
            {required: true, message: '请输入活动名称', trigger: 'blur'}
          ],
          textbookName: [
            {required: true, message: '请输入活动名称', trigger: 'blur'}
          ],
          publishingHouse: [
            {required: true, message: '请输入活动名称', trigger: 'blur'}
          ],
          author: [
            {required: true, message: '请输入活动名称', trigger: 'blur'}
          ],
          isbn: [
            {required: true, message: '请输入活动名称', trigger: 'blur'}
          ],
          price: [
            {required: true, message: '请输入活动名称', trigger: 'blur'}
          ],
          teacherCourseId: [
            {required: true, message: '请输入活动名称', trigger: 'blur'}
          ],
          remark1: [
            {required: true, message: '请输入活动名称', trigger: 'blur'}
          ]
        },
        teacherCourseIdChoose: [],
      }
    },
    components: {},
    mounted: function () {
      this.$nextTick(function () {
        this.init();
      })
    },
    methods: {
      init(){
        this.getTeacherCourseIdChoose()
      },
      getTeacherCourseIdChoose(){
        this.$http.get(this.$until.url + '/textBookManage/getNameAndId').then(response => {
          for (const element of response.body.courseToteacher) {
            this.teacherCourseIdChoose.push(element);
          }
        }, response => {
           console.log('获取失败')
        });
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.addTextbookRes();
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      addTextbookRes: function () {
        this.$http.post(this.$until.url + '/textBookManage/addTextBook', this.newTextbookForm, {emulateJSON: true}).then(response => {
          //success
          this.$message({
            message: response.body.message,
            type: 'success'
          });
          this.$router.replace({path: '/teachMaterialDBManage'});
        }, response => {
          this.$message.error('新增教材库信息，错了哦');
        });
      }
    }
  }
</script>
